<template>
	<input
		class="choose-file"
		:accept="props.accept"
		:multiple="props.multiple"
		type="file"
		@change="changeFile"
	>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
interface Props {
  multiple: boolean,
  accept: string
}
const props = withDefaults(defineProps<Props>(), {
  multiple: false,
  accept: '*'
})
const emit = defineEmits<{
  (e: 'change', files: File[]): void
}>()
/**
 * 选择文件
 */
const changeFile = (e:{target: any}) => {
  if (e.target.files.length > 0) {
    emit('change', Array.from(e.target.files))
  }
}
</script>

<style lang="scss" scoped>
.choose-file {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}
</style>
